﻿<%@ Page Language="VB" 
    AutoEventWireup="false" 
    CodeFile="Youtube.aspx.vb" 
    Inherits="Youtube" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <link href="CSS/youtube.css" rel="stylesheet" type="text/css" />
    <script src="Javascript/jquery.js" type="text/javascript"></script>
    <script src="Javascript/swfobject.js" type="text/javascript"></script>
    <title>Series</title>
</head>

<body bgcolor="#0b5eba">
    <form id="form1" runat="server" defaultbutton="btnDefault">

    <asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" />

    <asp:UpdatePanel runat="server" ID="updPanel">
    <ContentTemplate>

    <asp:HiddenField ID="cmdName" runat="server" />
    <asp:HiddenField ID="cmdArg" runat="server" />
    <asp:HiddenField ID="btnText" runat="server" />
    
    <asp:HiddenField ID="videoUrl" runat="server" />

    <asp:UpdateProgress ID="UpdateProgress1" runat="server"
        DisplayAfter="250">
        <ProgressTemplate>            
            <div id="activityIndicator"></div>
        </ProgressTemplate>    
    </asp:UpdateProgress>  			
    
	<div id='library-container'>
        <asp:Button ID="btnDefault" runat="server" style="display:none" />
		
		<div id='library-breadcrumb-container'>
	        <asp:ListView ID="lstBreadcrumb" runat="server">
			    <LayoutTemplate>
			        <asp:PlaceHolder runat="server" id="itemPlaceHolder">
			        </asp:PlaceHolder>
			    </LayoutTemplate>
			    <ItemTemplate>
			        <asp:Panel ID="pnlBreadcrumbItem" runat="server"
			            cssclass="breadcrumbItem">
			            <asp:LinkButton ID="btnBreadcrumb" runat="server" />
			        </asp:Panel>
			    </ItemTemplate>
            </asp:ListView>
			<asp:Panel ID="pnlLastBreadcrumbItem" runat="server">
			    <asp:Label ID="lblLastBreadcrumb" runat="server"
			        cssclass="lastBreadcrumbItem" />
			</asp:Panel>
		</div>

		<div id='library-search-container'>
			<div id='library-search'>
			    <asp:TextBox ID="txtSearch" runat="server" />
			</div>
		</div>

		<div id='library-main-container'>

			<div id='library-menu'>
				<ul id="ulMenu" runat="server">
					<li class="menu-item">
					<asp:LinkButton id="btnVideo" 
					                CommandName="Videos" 
					                runat="server" 
					                onclientclick="LibraryRowsFadeOut();"
					                Text="Videos"
					                 />					
					</li>
					<li class="menu-item">
					<asp:LinkButton id="btnListas" 
					                CommandName="Listas" 
					                runat="server" 
					                onclientclick="LibraryRowsFadeOut();"
					                Text="Listas"
					                 />
				</ul>
			</div>
			
			<asp:panel id='LibraryMain' runat="server">
			
			    <div id='LibraryRows' style="display:none">

			    <asp:ListView ID="lstMain" runat="server">
			        <LayoutTemplate>
			            <asp:PlaceHolder runat="server" id="itemPlaceHolder"></asp:PlaceHolder>
			        </LayoutTemplate>
			        <ItemTemplate>
			            <asp:Panel ID="pnlVideoEntry" runat="server" 
			                CssClass="video-entry">
    			                <asp:Panel ID="pnlVideoThumbnail" runat="server" 
    			                    CssClass="video-thumbnail">
    			                    <asp:ImageButton ID="imgThumbnail" runat="server" 
    			                        OnClientClick="javascript:fadeOutpnlRow();"/>
    			                </asp:Panel>
    			                <asp:Panel ID="pnlVideoMainContent" runat="server" 
    			                    CssClass="video-main-content">
    			                    <asp:Panel id="pnlVideoTitle" runat="server"
    			                        cssclass="video-title">
        			                    <asp:Label ID="lblVideoTitle" runat="server"
        			                        Text="&nbsp"/>
        			                </asp:Panel>
    			                    <asp:Panel id="pnlVideoDescription" runat="server"
    			                        cssclass="video-description">
        			                    <asp:Label ID="lblVideoDescription" runat="server"
        			                        Text="&nbsp"/>
        			                </asp:Panel>        			                
    			                </asp:Panel>
                        </asp:Panel>
			        </ItemTemplate>
			    </asp:ListView>

			    </div>
			    
			    <div id="pnlYouTubePlayer" style="visibility:hidden">
			    </div>
			    
			</asp:panel>
		</div>

	</div>

    </ContentTemplate>
    </asp:UpdatePanel>

    <script language="javascript" type="text/javascript">

        var params = { allowScriptAccess: "always", allowFullScreen: "true" };
        var atts = { id: "myytplayer" };

        function play_video_step_1(video,nombre) {
            theForm.cmdName.value = "PlayVideo";
            theForm.cmdArg.value = video;
            theForm.btnText.value = nombre;
            LibraryRowsFadeOut();
        }

        function setAction(parCmdName, parCmdArg, ItemId) {
            LibraryRowsFadeOut();
            theForm.cmdName.value = parCmdName;
            theForm.cmdArg.value = parCmdArg;
            theForm.btnText.value = $("#" + ItemId).text();
        }

        /* Se ejecuta cada vez que hay un postback  */
        function pageLoad() {
            setEvents();
            if (theForm.videoUrl.value != "") {
                $("#pnlYouTubePlayer").css({ visibility: "visible" });
                swfobject.embedSWF(theForm.videoUrl.value, "pnlYouTubePlayer", "510", "386", "8", null, null, params, atts);
                theForm.videoUrl.value = "";
            }
            else
            $("#LibraryRows").fadeIn(300);
        }

        function onYouTubePlayerReady(playerId) {
            ytplayer = document.getElementById("myytplayer");
            ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
        }

        function onytplayerStateChange(newState) {
            if (newState == 0) { /* Terminó el video */
            }
        }

        /* Se ejecuta sólo la primera vez que se carga el formulario
        $(document).ready(function() {
            $get('UpdateProgress1').style.display = 'block'; 
            __doPostBack('LibraryMain', '@@@@');
        })
        */

        function setEvents() {
            $('.row').hover(
                function() {
                    $(this).addClass('hover');
                },
                function() {
                    $(this).removeClass('hover');
                }
            );

            $('.menu-item').hover(
                function() {
                    $(this).addClass('hover');
                },
                function() {
                    $(this).removeClass('hover');
                }
            );
        }

        function EndRequestHandler(sender, args) {
            // $("#LibraryRows").fadeIn(300);
        }

        function LibraryRowsFadeOut() {
            $("#LibraryRows").fadeOut(100);
        }

        $(document).ready(function() {
            setTimeout(function() { $("#txtSearch").focus() }, 50)
        }); 

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
 
    </script>
	
    </form>

</body>

</html>
